import React, {Component, useCallback, useState} from 'react';

/*
useCallback(记忆函数)
防止因为组件重新渲染,导致方法被重新创建,起到缓存作用,只有第二个参数变化了才重新声明一次

只有[]里面的值改变后,这个函数才会声明一次
如果不传入空数组,那么就是第一次创建后就被缓存,如果[]里面的值后期改变了,拿到的还是老的值
如果不传第二个参数,每次进入会重新声明一次,拿到的就是[]里面最新的值
 */
export default function App() {

    const [name, setname] = useState('xiaoming')
    const [text, settext] = useState('')
    const [list, setlist] = useState(['aa', 'bb', 'cc'])

    const handlachange = useCallback((event) => {
        settext(event.target.value)
    }, [])


    const handleAdd = useCallback(() => {
        if (text) {
            setlist([...list, text])
            settext('')
        }

    },[text,list])


    const handledel = useCallback((index) => {
        var newlist = [...list]
        newlist.splice(index, 1)
        setlist(newlist)
    },[list])

    return (
        <div>
            <div>{name}</div>
            <button onClick={()=>{
                setname('daming')
            }}>click</button>
            <input type="text" onChange={handlachange} value={text}/>
            <button onClick={handleAdd}>add</button>
            <ul>
                {
                    list.map((item, index) =>
                        <li key={index}>{item}
                            <button onClick={() => {
                                handledel(index)
                            }}>delete
                            </button>
                        </li>
                    )
                }
            </ul>
            {
                list.length == 0 && <div>空!</div>
            }

        </div>
    );
}
